<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= title %>
    </title>
    <link rel="shortcut icon" type="image/x-icon" href="./logo.svg">
</head>

<body>
    <div id="<%= mountElementId %>">
        <style>
            html {
                /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
                line-height: 1.15;
            }

            html[data-theme='dark'] .app-loading {
                background-color: #2c344a;
            }

            html[data-theme='dark'] .app-loading .app-loading-title {
                color: rgb(255 255 255 / 85%);
            }

            .app-loading {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                background-color: #f4f7f9;
            }

            .app-loading .app-loading-wrap {
                display: flex;
                position: absolute;
                top: 50%;
                left: 50%;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transform: translate3d(-50%, -50%, 0);
            }

            .app-loading .dots {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 98px;
            }

            .app-loading .app-loading-title {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 30px;
                color: rgb(0 0 0 / 85%);
                font-size: 30px;
            }

            .app-loading .app-loading-logo {
                display: block;
                width: 90px;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            .dot {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width: 48px;
                height: 48px;
                margin-top: 30px;
                transform: rotate(45deg);
                animation: ant-rotate 1.2s infinite linear;
                font-size: 32px;
            }

            .dot i {
                display: block;
                position: absolute;
                width: 20px;
                height: 20px;
                transform: scale(0.75);
                transform-origin: 50% 50%;
                animation: ant-spin-move 1s infinite linear alternate;
                border-radius: 100%;
                opacity: 0.3;
                background-color: #0065cc;
            }

            .dot i:nth-child(1) {
                top: 0;
                left: 0;
            }

            .dot i:nth-child(2) {
                top: 0;
                right: 0;
                animation-delay: 0.4s;
            }

            .dot i:nth-child(3) {
                right: 0;
                bottom: 0;
                animation-delay: 0.8s;
            }

            .dot i:nth-child(4) {
                bottom: 0;
                left: 0;
                animation-delay: 1.2s;
            }

            @keyframes ant-rotate {
                to {
                    transform: rotate(405deg);
                }
            }

            @keyframes ant-rotate {
                to {
                    transform: rotate(405deg);
                }
            }

            @keyframes ant-spin-move {
                to {
                    opacity: 1;
                }
            }

            @keyframes ant-spin-move {
                to {
                    opacity: 1;
                }
            }
        </style>
        <div class="app-loading">
            <div class="app-loading-wrap">
                <div class="app-loading-dots">
                    <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
                </div>
                <div class="app-loading-title">
                    <%= title %>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
